<template>
  <view class="container1">
    <view class="card u-m-t-20 personalUerInfo">
      <view class="u-flex u-p-20">
        <view class="avatar">
          <image :src="userInfo?.avatar" mode="aspectFill"> </image>
        </view>
        <view class="u-flex-1 nickname u-p-l-20">{{ userInfo?.name }}</view>
        <view class="postBtn" @click="toPost">发布</view>
      </view>
      <view class="u-flex u-text-center u-row-between userNum">
        <view class="items">
          <view class="tips">总阅读(播放)量</view>
          <view class="u-p-t-20 u-font-36">{{userInfo?.creative_center?.count_read_num}}</view>
          <view class="u-p-t-20 tips">昨日{{userInfo?.creative_center?.last_day_read_num}}</view>
          <view class="u-p-t-20 u-flex u-col-center u-row-center">
            今日 {{userInfo?.creative_center?.today_day_read_num}}
            <image src="https://ossresource.miyingbl.com/def/3db38202405231148165179.png" mode="" class="downIcon"
              v-if="userInfo?.creative_center?.read_num_change>0">
            </image>
            <image src="https://ossresource.miyingbl.com/def/65db5202405231148154376.png" mode="" class="downIcon"
              v-if="userInfo?.creative_center?.read_num_change<0">
            </image>
            <view v-if="userInfo?.creative_center?.read_num_change==0" class="heng-icon "></view>
          </view>
        </view>
        <view class="items">
          <view class="tips">总粉丝</view>
          <view class="u-p-t-20 u-font-36">{{userInfo?.creative_center?.fans_num}}</view>
          <view class="u-p-t-20 tips">昨日{{userInfo?.creative_center?.last_day_fans_num}}</view>
          <view class="u-p-t-20  u-flex u-col-center u-row-center">今日 {{userInfo?.creative_center?.today_day_fans_num}}
            <image src="https://ossresource.miyingbl.com/def/3db38202405231148165179.png" mode="" class="downIcon"
              v-if="userInfo?.creative_center?.fans_num_change>0">
            </image>
            <image src="https://ossresource.miyingbl.com/def/65db5202405231148154376.png" mode="" class="downIcon"
              v-if="userInfo?.creative_center?.fans_num_change<0">
            </image>
            <view v-if="userInfo?.creative_center?.fans_num_change==0" class="heng-icon "></view>
          </view>
        </view>
        <view class="items">
          <view class="tips">直播总时长(h)</view>
          <view class="u-p-t-20 u-font-36">{{userInfo?.creative_center?.live_time}}</view>
          <view class="u-p-t-20 tips">昨日{{userInfo?.creative_center?.last_day_live_time}}</view>
          <view class="u-p-t-20  u-flex u-col-center u-row-center">今日 {{userInfo?.creative_center?.live_time_change}}
            <image src="https://ossresource.miyingbl.com/def/3db38202405231148165179.png" mode="" class="downIcon"
              v-if="userInfo?.creative_center?.live_time_change>0">
            </image>
            <image src="https://ossresource.miyingbl.com/def/65db5202405231148154376.png" mode="" class="downIcon"
              v-if="userInfo?.creative_center?.live_time_change<0">
            </image>
            <view v-if="userInfo?.creative_center?.live_time_change==0" class="heng-icon "></view>
          </view>
        </view>
      </view>
    </view>
    <view class="card u-m-t-20 serviceBox">
      <view class="title u-p-20">创作服务</view>
      <view>
        <up-grid :border="false" @click="click" col="3">
          <up-grid-item v-for="(item, index) in linkList" :key="index" @click="navigateTo(item.link)">
            <image :src="item.icon" class="serviceIcons"></image>
            <text class="grid-text">{{ item.name }}</text>
          </up-grid-item>
        </up-grid>
      </view>
    </view>

    <view class="recommendBox">
      <view>热门精选</view>
      <view>
        <up-tabs :list="tablist" @click="onTabClick" :scrollable="false" :current="currentTab" :inactiveStyle="{
          fontWeight: '400',
          fontSize: '28rpx',
          lineHeight: 2.5,
          color: '#5C5C5C',
        }" :activeStyle="{
          fontWeight: '500',
          fontSize: '28rpx',
          lineHeight: 2.5,
          color: '#202020',
        }" :lineHeight="5" lineColor="#00C1B9"></up-tabs>
      </view>
      <view class="list" v-if="currentTab == 0">
        <view class="zbItem u-flex" v-for="(item, index) in articelList" :key="index">
          <view class="thumb " @click="toLiveBack(item)">
            <image :src="item.roomImage" mode="aspectFill"></image>
            <view class="maskimg"></view>
            <view class="desc u-flex">
              <image src="https://ossresource.miyingbl.com/def/5d2aa202406241105439626.png" class="icon"></image>
              <view>直播回放</view>
            </view>
          </view>
          <view class="u-flex-1">
            <view class="u-flex u-p-t-10 u-p-b-10 u-flex-column u-flex-between u-flex-items-start"
              style="height: 200rpx">
              <view class="u-line-1 title">{{ item.roomName }}</view>
              <view class="u-flex seeNum">
                <view>观看人数：{{item.live_people?numToWan(item.live_people):0}}</view>
                <view class="u-m-l-50">涨粉：{{item.new_fans?numToWan(item.new_fans):0}}</view>
              </view>
              <view class="userInfo u-flex" @click.stop="toMypage(item)">
                <view class="avatar">
                  <image :src="item?.avatar" mode="aspectFill"> </image>
                </view>
                <view class="u-flex-1 nickname u-p-l-10">
                  {{ item?.nickname }}
                </view>
                <view class="fans">{{item.count_fans?numToWan(item.count_fans):0}}粉丝</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 科普 -->
      <view class="list" v-if="currentTab == 1">
        <view class="list_item" v-for="(item, index) in articelList" :key="index"
          @click="navigateTo(`/baby/science/index?id=${item?.id}`)">
          <view class="userInfo u-flex u-col-center">
            <view class="avatar" @click.stop="toMypage(item)">
              <image :src="item?.avatar" mode="aspectFill"> </image>
            </view>
            <view class="u-flex-1 nickname u-p-l-10">
              <view @click.stop="toMypage(item)">{{ item?.nickname }}</view>
              <view class="user_tag" v-if="item?.app_user_tag" @click.stop="toMypage(item)">
                <image v-if="item?.app_user_tag == 'official'"
                  src="https://ossresource.miyingbl.com/uploads/20240308/072661a99870e1fcfba1d1df6d8ddd35.png"></image>
                <image v-if="item?.app_user_tag == 'doctor'"
                  src="https://ossresource.miyingbl.com/uploads/20240308/dbb99ae497e429ae87f740fb0f64a57f.png"></image>
              </view>
            </view>
            <view class="btn" v-if="item?.is_follow" @click.stop="toFollow(item)">已关注</view>
            <view class="btn" v-else @click.stop="toFollow(item)">+关注</view>
          </view>
          <view class="captions">
            <view class="title u-line-1">{{ item?.title }}</view>
            <view class="content u-line-2">{{ item?.text_area }}
              <text v-if="item.showAll" class="showAll">...<text v-if="item.showAll"
                  style="color: #00C1B9">全文</text></text>
            </view>
            <view class="image">
              <view class="imagesItem" v-for="(items, indexs) in item?.image" :key="indexs">
                <image :src="items" mode="aspectFill"></image>
              </view>
            </view>
          </view>
          <view class="actions u-flex u-row-between">
            <view class="actionsItem u-flex u-col-center">
              <image src="https://ossresource.miyingbl.com/def/d6e24202405231501531445.png" class="icons"></image>
              <text>{{ item.views_number }}</text>
            </view>
            <view class="actionsItem u-flex u-col-center"
              @click.stop="navigateTo(`/baby/science/index?id=${item?.id}&isCom=true`)">
              <image src="https://ossresource.miyingbl.com/def/bd0b5202405231502545151.png" class="icons"></image>
              <text>{{ item.comment_number }}</text>
            </view>
            <view class="actionsItem u-flex u-col-center" @click.stop="onArticleOperate(item, 1)">
              <image src="https://ossresource.miyingbl.com/def/9f361202405231506404750.png" class="icons"
                v-if="item.is_like"></image>
              <image src="https://ossresource.miyingbl.com/def/29cbd202405231506398795.png" class="icons" v-else>
              </image>
              <text>{{ item.zan_number }}</text>
            </view>
            <view class="actionsItem u-flex u-col-center" @click.stop="onArticleOperate(item, 2)">
              <image src="https://ossresource.miyingbl.com/def/2cb00202405231506423239.png" class="icons"
                v-if="item.is_collect"></image>
              <image src="https://ossresource.miyingbl.com/def/7165b202405231506414059.png" class="icons" v-else>
              </image>
              <text>{{ item.collect_number }}</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 视频 -->
      <view v-if="currentTab == 2">
        <view class="videoList u-flex">
          <view class="video_item" v-for="(item, index) in articelList" :key="index" @click="toVideoPlay(item,index)">
            <view class="videoimage">
              <image :src="item.thumbnail?item.thumbnail:item.video_url+'?x-oss-process=video/snapshot,t_480,f_jpg'"
                mode="aspectFill" class="imagesItem"></image>
              <view class="tags">{{numToWan(item.view_number)}}浏览</view>
            </view>

            <view class="captions">
              <view class="title u-line-1">{{ item?.content }}</view>
              <view class="userInfo u-flex u-col-center">
                <view class="avatar" @click.stop="toMypage(item)">
                  <image :src="item?.avatar" mode="aspectFill"> </image>
                </view>
                <view class="u-flex-1 nickname u-p-l-10 u-line-1">
                  <view @click.stop="toMypage(item)">{{ item?.nickname }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- <h-loading :show="loading" :showMore="articelList?.length></h-loading> -->
      <h-line height="20"></h-line>
    </view>
  </view>
  <!--  <button class="btu" @click="recorderVideo">视频录制</button>

  <button class="btu" @click="editVideo">编辑视频</button>

  <button class="btu" @click="stitchingVideo">拼接视频</button>

  <button class="btu" @click="imageVideo">图片转视频</button>

  <button class="btu" @click="uploadVideo">视频上传</button>
  <button class="btu" @click="cancleUpload">取消上传</button>
  <view class="text-area">
    <text class="title">{{title1}}</text>
  </view> -->
  <u-popup :show="showPostWindow" :round="20" mode="bottom" @close="closePostWindow" @open="openPostWindow"
    :closeOnClickOverlay="true">
    <view class="u-p-t-50">
      <view class="creatUser u-flex">
        <view class="userInfo u-flex u-col-center">
          <view class="avatar">
            <image :src="userInfo?.avatar" mode="aspectFill"> </image>
          </view>
          <view class="u-flex-1 nickname u-p-l-10">
            {{ userInfo?.name }}
          </view>
        </view>
      </view>
      <view class="creatBox">
        <up-grid :border="false" col="4">
          <up-grid-item v-for="(item, index) in creatList" :key="index" @click="openAuth(item.url, index)">
            <image :src="item.icon" class="creatIcon"></image>
            <text class="grid-text">{{ item.name }}</text>
          </up-grid-item>
        </up-grid>
      </view>
    </view>
  </u-popup>
  <h-authpup ref="authpup" :h="system.statusHeight" type="top" @changeAuth="changeAuth" permissionID="CAMERA"></h-authpup>
  <h-authpup ref="authpupWrite" :h="system.statusHeight" type="top" @changeAuth="changeAuthWrite" permissionID="WRITE_EXTERNAL_STORAGE"></h-authpup>
  <h-authpup ref="authpupAudio" :h="system.statusHeight" type="top" @changeAuth="changeAuthAudio" permissionID="RECORD_AUDIO"></h-authpup>
  <!-- [CAMERA,WRITE_EXTERNAL_STORAGE,RECORD_AUDIO] -->
  <h-login ref="login"></h-login>
</template>

<script setup lang="ts">
  // #ifdef APP
  // const sdkwx = uni.requireNativePlugin('ASV-Snap')
var liveRoomModule = uni.requireNativePlugin("RY-TencentTrtcLiveRoom-Module");
  // #endif
  import { ref, nextTick, reactive } from 'vue'
  import { navigateTo } from '@/utils'
  import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app'
  import { hotListApi, getCreateUser, articleOperateApi, followUserApi, checkLivingApi} from '@/api/social'
  import { doctorInfo } from '@/api/home'
  import { useMemberStore, useSystemStore } from '@/stores'
  const store = useMemberStore()
  const system = useSystemStore()
  const login = ref(null)
  const token = store?.token
  const plug = reactive({})
  const params = ref({
    page: 1,
    limit: 10,
    type: 4,
    doctor_user_id: store?.userInfo?.uid
  })
  const loading = ref(false)
  function numToWan(num) {
    if (num > 10000) {
      let num1 = num / 10000
      let data = num1.toFixed(1)
      return data + 'w'
    } else {
      return num
    }
  }
  onLoad(() => {
    gethot()
    addListener()
    // userInfo.value = store.userInfo.user
    // console.log(liveRoomModule,userInfo.value)
    uni.$on('update_live',function(res){

    })


  })
  const roomId =ref()
  const deviceId = ref()
  const checkLive= async ()=>{
      let res = await checkLivingApi({doctor_user_id: store?.userInfo?.uid})
      console.log('房间数据', res)
      // this.type = 1
      if (res.data) {
        roomId.value = res.data.id.toString()
        deviceId.value = res.data.equipment
        if( uni.getSystemInfoSync().deviceId== deviceId.value){
          creatList.value[2].url=`/socials/recordVIdeo/videoLive?type=live&roomId=${roomId.value}&from=1&deviceId=${deviceId.value}`
          creatList.value[1].url=`/socials/recordVIdeo/videoLive?type=video&roomId=${roomId.value}&from=1&deviceId=${deviceId.value}`
        }else{
           creatList.value[2].url=`/socials/recordVIdeo/videoLive?type=live&deviceId=${deviceId.value}`
           creatList.value[1].url=`/socials/recordVIdeo/videoLive?type=video&deviceId=${deviceId.value}`
        }
      }else{
        creatList.value[2].url=`/socials/recordVIdeo/videoLive?type=live`
        creatList.value[1].url=`/socials/recordVIdeo/videoLive?type=video`
      }

  }
  const addListener = () => {
    // 监听关注
    uni.$on('followUser', (row) => {
      let arr = articelList.value.map((v) => {
        if (v.uid == row.uid) {
          return {
            ...v,
            is_follow: !v.is_follow,
          }
        } else {
          return {
            ...v,
          }
        }
      })
      articelList.value = arr
    })

    // 监听点赞 、关注
    uni.$on('update_num', (row) => {
      console.log(row)
      const index = articelList.value.findIndex((item) => item.id == row.id)
      // const type = row.taptype == 'is_like' ? 'is_like' : 'is_collect'
      if (index != -1) {
        articelList.value[index].zan_number = row.zan_number
        articelList.value[index].is_like = row.is_like
        articelList.value[index].is_collect = row.is_collect
        articelList.value[index].collect_number = row.collect_number
        articelList.value[index].comment_number = row.comment_number
        articelList.value[index].view_number = row.view_number
      }
    })
  }
  onShow(() => {
    getDoctorInfo()
    checkLive()
  })
  const userInfo = ref({})
  const getDoctorInfo = () => {
    doctorInfo().then((res) => {
      userInfo.value = res.data
    })
  }
  onReachBottom(() => {
    // if (currentTab.value == 0) return
    if (lastPage.value > params.value.page) {
      params.value.page++
      gethot()
    }
  })
  const lastPage = ref(0)
  const gethot = () => {
    loading.value = true
    hotListApi(params.value).then((res) => {
      loading.value = false
      lastPage.value = res.data.last_page
      let list = res.data.data.map((v) => {
        if (v.text_area?.length > 47) {
          v.text_area = v.text_area.substr(0, 47)
          v.showAll = true
        }
        v.isplay = false
        v.isShowProgressBarTime = false
        return v
      })
      articelList.value = params.value.page == 1 ? list : articelList.value.concat(list)
    })
  }
  const linkList = ref([
    {
      name: '内容管理',
      icon: 'https://ossresource.miyingbl.com/def/2a15d202405231350352361.png',
      link: '/socials/content/content',
    },
    {
      name: '草稿管理',
      icon: 'https://ossresource.miyingbl.com/def/86c2c202405231350366867.png',
      link: '/socials/drafts/drafts',
    },
    // {
    //   name: '直播预告',
    //   icon: 'https://ossresource.miyingbl.com/def/2493b202405231350374812.png',
    //   link: '/social/livePreview/livePreview',
    // },
    {
      name: '屏蔽词管理',
      icon: 'https://ossresource.miyingbl.com/def/65c8b202405231350357347.png',
      link: '/socials/blockingWords/blockingWords',
    },
  ])
  const currentTab = ref(0) //tab
  const showPostWindow = ref(false)
  const toPost = () => {
    showPostWindow.value = true
  }
  // 1动态  2科普  3视频  4直播
  const tablist = ref([
    {
      name: '人气直播',
      id: 4
    },
    {
      name: '文章',
      id: 2
    },
    {
      name: '视频',
      id: 3
    },
  ])
  const onTabClick = (e : any) => {
    currentTab.value = e.index
    console.log(e)
    params.value = {
      page: 1,
      limit: 10,
      type: e.id,
      doctor_user_id: store?.userInfo?.uid
    }
    articelList.value = []
    nextTick(() => {
      gethot()
    })
  }
  const authpup = ref(null)
  const authpupWrite = ref(null)
  const authpupAudio = ref(null)
  const url = ref('')
  const indexs = ref(0)
  function openAuth(item:any, index:any) {
    url.value = item
    indexs.value = index
    nextTick(() => {
      authpup.value.open()
    })
    // navigateToc(item, index)
  }
  function changeAuth() {
    nextTick(() =>{
      authpupWrite.value.open()
    })
  }
  function changeAuthWrite() {
    nextTick(() =>{
      authpupAudio.value.open()
    })
  }
  function changeAuthAudio() {
    const userSig = useMemberStore()?.im?.user_sig
    console.log(userSig)
    console.log(userInfo?.value?.uid.toString())
    // #ifdef APP
    liveRoomModule.init({
    	sdkAppId: 1600003080,
    	docPath: plus.io.convertLocalFileSystemURL('_doc')
    }, ret => {
    	liveRoomModule.login({
    		sdkAppId: 1600003080,
    		userId:userInfo?.value?.uid.toString(),
        userSig: userSig,
    	}, ret => {
    		if (ret.msg) {

        }
    	});
    });
    // #endif
    console.log(url.value, indexs.value)
    navigateToc(url.value, indexs.value)
  }
  function toMypage(item) {
    const userStore = useMemberStore()
    let uid = item?.uid || item?.roomUserId || item?.user_id
    console.log(uid)
    console.log(userStore?.userInfo?.uid)
    if (item?.app_user_tag) {
      if (uid == userStore?.userInfo?.uid) {
        navigateTo(
          `/pages-users/my-page/index?is_self=1&uid=${uid}&type=kp&tag=${item?.app_user_tag}`,
        )
      } else {
        navigateTo(
          `/pages-users/my-page/official-doctor-home?is_self=0&uid=${item?.uid}&type=kp&tag=${item?.app_user_tag}`,
        )
      }
    } else {
      navigateTo(
        `/pages-users/my-page/index?is_self=0&uid=${uid}&type=kp&tag=${item?.app_user_tag}`,
      )
    }
  }
  const articelList = ref()
  const creatList = ref([
    {
      name: '发科普',
      icon: 'https://ossresource.miyingbl.com/def/14e97202405231524479738.png',
      url: '/socials/article/article',
    },
    {
      name: '发帖子',
      icon: 'https://ossresource.miyingbl.com/def/8f8c7202405231524482724.png',
      url: '/socials/issue/index?current=5',
    },
    {
      name: '发视频',
      icon: 'https://ossresource.miyingbl.com/def/5f4d7202405231524466952.png',
      url: '/socials/recordVIdeo/videoLive?type=video',
    },
    {
      name: '开直播',
      icon: 'https://ossresource.miyingbl.com/def/9c968202405231524459452.png',
      url: '/socials/recordVIdeo/videoLive?type=live&form=3',
    },
  ])
  const closePostWindow = () => {
    showPostWindow.value = false
  }
  const openPostWindow = () => { }
  async function toFollow(row) {
    if (!token) {
      login.value.open()
      return false
    }
    let res = await followUserApi({
      to_uid: row.uid,
    })
    // if (row.is_follow == 1) {
    //   row.is_follow = 0
    // } else {
    //   row.is_follow = 1
    // }
    uni.showToast({
      title: res.message,
      icon: 'none',
    })
    uni.$emit('followUser', {
      uid: row.uid,
    })
  }
  async function onArticleOperate(row, type) {
    if (!token) {
      login.value.open()
      return false
    }
    let res = await articleOperateApi({
      article_id: row.id,
      type,
      tab: 2,
    })
    if (res.code == 200) {
      if (type == 1) {
        if (row.is_like == 1) {
          row.is_like = 0
          row.zan_number--
        } else {
          row.is_like = 1
          row.zan_number++
        }
      }

      if (type == 2) {
        if (row.is_collect == 1) {
          row.is_collect = 0
          row.collect_number--
        } else {
          row.is_collect = 1
          row.collect_number++
        }
      }
    }

    uni.showToast({
      title: res.message,
      icon: 'none',
    })
    console.log(res)
  }
  const navigateToc = (url, index) => {
    if (index == 0 || index == 1) {
      navigateTo(url)
    } else if (index == 2) {
      // recorderVideo()
      navigateTo(url)
    }
    showPostWindow.value = false
  }
  const videoPath = ref()
  const imagePath = ref()
  const title1 = ref()

  function recorderVideo() {
    console.log(plug.value)
    plug.value.recorderVideo(
      {
        ratio: '16/9', //视频比例
        quality: 'MEDIUM', // 清晰度
        isedit: false, //是否录制完，马上跳到视频编辑页面
        min: 5, //允许最小的录制时间
        max: 60, //允许最大的录制时间
        customize: {
          resolution: '540p', //分辨率
          bite: 6500, //码率
          fps: 20, //帧率
          gop: 3, //关键帧间隔
        },
      },
      (ret) => {
        videoPath.value = ret.videoPath
        imagePath.value = ret.imagePath
        if (ret.code == '0') {
          //拍摄返回视频信息
          let data = {
            videoPath: ret.videoPath,
            imagePath: ret.imagePath,
          }
          navigateTo('/social/video/postVideo?res=' + JSON.stringify(data))
        } else {
        }
      },
    )
  }

  function editVideo() {
    plug.value.editVideo({}, (ret) => {
      videoPath.value = ret.videoPath
      imagePath.value = ret.imagePath

      title1.value = JSON.stringify(ret)
    })
  }

  function stitchingVideo() {
    plug.value.stitchingVideo({}, (ret) => {
      videoPath.value = ret.videoPath
      imagePath.value = ret.imagePath

      title1.value = JSON.stringify(ret)
    })
  }

  function imageVideo() {
    plug.value.imageVideo({}, (ret) => {
      videoPath.value = ret.videoPath
      imagePath.value = ret.imagePath

      title1.value = JSON.stringify(ret)
    })
  }

  function uploadVideo() {
    //获取签名信息
    uni.request({
      url: 'http://www.html5-app.com/dome/sing.php', //仅为示例，并非真实接口地址。
      data: {
        text: '',
      },
      success: (res) => {
        title1.value = '服务器sing返回：' + res.data.sing

        plug.value.uploadVideo(
          {
            videoPath: videoPath.value,
            coverPath: imagePath.value,
            fileName: '测试',

            signature: res.data.sing, //签名信息
          },
          (ret) => {
            console.log('ret.videoPath===' + JSON.stringify(ret))
          },
        )
      },
    })
  }

  function cancleUpload() {
    plug.value.cancleUpload({}, (ret) => {
      title1.value = JSON.stringify(ret)
      // _this.title=JSON.stringify(ret);
    })
  }
  const toLiveBack = (item) => {
    console.log(item)
    let video_time = item.video_time / 3600

    if (video_time && video_time >= 2) {
      navigateTo(`/socials/video/livePlayList?roomId=${item.id}&userId=${item.roomUserId}`)
    } else {
      navigateTo(`/socials/video/livePlayback?roomId=${item.id}&userId=${item.roomUserId}`)
    }
  }

  const toVideoPlay = (item, index) => {
    let list = []
    let videoNumber = 54;//（请输入 6 的倍数，来控制 DOM 节点的总视频数量）
    let dotNumber = videoNumber / 2;
    let inf = (index + 1) - dotNumber;
    console.log('点击了第' + (index + 1) + '个视频.');
    let beforeLocation = 0;
    let afterLocation = 0;
    let location = 0;
    if (inf <= 0) {
      beforeLocation = 0;
      location = index;
      for (let i = 0; i <= index; i++) {
        list.push(articelList.value[i]);
      }
    } else {
      beforeLocation = inf;
      location = index - inf;
      for (let i = inf; i <= index; i++) {
        list.push(articelList.value[i]);
      }
    }
    let onf = articelList.value.length - (index + 1)
    console.log('下方视频数：' + onf);
    if (onf <= dotNumber) {
      if (onf !== 0) {
        afterLocation = articelList.value.length - 1;
        for (let i = index + 1; i < articelList.value.length; i++) {
          list.push(articelList.value[i]);
        }
      } else {
        afterLocation = articelList.value.length - 1;
      }
    } else {
      afterLocation = index + dotNumber;
      for (let i = index + 1; i <= index + dotNumber; i++) {
        list.push(articelList.value[i]);
      }
    }
    console.log('总视频数：' + list.length);
    console.log('\n\n第一个视频下标：' + beforeLocation + '.\n' + '最后一个视频下标：' + afterLocation + '.\n\n');
    uni.setStorageSync("List", articelList.value);
    uni.setStorageSync("dataList", list);
    uni.navigateTo({
      url: '/socials/video/video?type=1&option=' + index + '&page=' + params.value.page + '&index=' + index + '&from=creation',
      animationType: 'zoom-out'
    })
  }
</script>
<style>
  page {
    background: #f6f6f6;
  }
</style>
<style lang="scss" scoped>
  .container1 {
    padding: 0 25rpx;
    font-family: PingFangSC, PingFang SC;
  }

  .u-font-36 {
    font-size: 36rpx;
  }

  .card {
    background: #ffffff;
    border-radius: 20rpx;
  }

  .personalUerInfo {
    .nickname {
      font-weight: 500;
      font-size: 30rpx;
      color: #202020;
    }

    .postBtn {
      width: 110rpx;
      height: 56rpx;
      line-height: 56rpx;
      background: #00C1B9;
      border-radius: 10rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #ffffff;
      text-align: center;
    }

    .avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;

      image {
        width: 100rpx;
        height: 100rpx;
        display: block;
        border-radius: 50%;
      }
    }

    .userNum {
      font-size: 30rpx;
      color: #202020;
      padding: 0 20rpx 0;

      .items {
        width: 210rpx;
        // background: linear-gradient(180deg, rgba(245, 246, 248, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
        border-radius: 20rpx;
        padding: 20rpx 0 30rpx;
      }

      .tips {
        font-size: 26rpx;
        color: #666;
      }
    }
  }

  .downIcon {
    width: 23rpx;
    height: 24rpx;
    margin-left: 5rpx;

    image {
      display: block;
      width: 23rpx;
      height: 24rpx;
    }
  }

  .serviceBox {
    padding-bottom: 30rpx;

    .title {
      font-weight: 500;
      font-size: 30rpx;
      color: #202020;
      margin-bottom: 10rpx;
    }


    .serviceIcons {
      width: 44rpx;
      height: 44rpx;

      image {
        display: block;
        width: 44rpx;
        height: 44rpx;
      }
    }

    .grid-text {
      font-weight: 400;
      font-size: 26rpx;
      color: #202020;
      padding-top: 20rpx;
    }
  }

  .recommendBox {
    padding-top: 30rpx;

    .title {
      font-weight: 500;
      font-size: 30rpx;
      color: #202020;
    }

    .user_tag {
      display: flex;
      margin-top: 5rpx;

      text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 22rpx;
        color: #969696;
        margin-right: 10rpx;
      }

      image {
        width: 113rpx;
        height: 27rpx;
        display: block;
        margin-right: 10rpx;
      }
    }

    .videoList {
      flex-wrap: wrap;

      .video_item {
        width: 340rpx;
        height: 596rpx;
        background: #FFFFFF;
        border-radius: 16rpx;
        margin-right: 20rpx;
        margin-top: 20rpx;

        &:nth-child(2n+2) {
          margin-right: 0;
        }

        .videoimage {
          border-radius: 16rpx;
          position: relative;

          .imagesItem {

            border-radius: 16rpx 16rpx 0 0;
            width: 340rpx;
            height: 460rpx;
            display: block;
          }

          .tags {
            min-width: 140rpx;
            height: 48rpx;
            line-height: 48rpx;
            background: rgba(51, 51, 51, 0.6);
            border-radius: 16rpx 0rpx 0rpx 0rpx;
            text-align: center;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            color: #FFFFFF;
            position: absolute;
            right: 0;
            bottom: 0;
            padding: 0 10rpx 0 10rpx;
          }
        }

        .captions {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
          padding: 20rpx;
        }

        .userInfo {
          align-items: center;
          margin-top: 18rpx;

          .avatar {
            width: 36rpx;
            border-radius: 36rpx;
            height: 36rpx;

            image {
              display: block;
              width: 100%;
              height: 100%;
              border-radius: 36rpx;
            }
          }

          .nickname {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #666666;
          }
        }
      }
    }

    .list_item {
      border-radius: 20rpx;
      background: #fff;
      margin: 20rpx 0;

      .userInfo {
        padding: 20rpx;

        .avatar {
          width: 66rpx;
          border-radius: 30rpx;
          height: 66rpx;

          image {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 30rpx;
          }
        }

        .btn {
          width: 110rpx;
          height: 48rpx;
          border-radius: 24rpx;
          border: 1rpx solid #00C1B9;
          text-align: center;
          font-weight: 400;
          font-size: 26rpx;
          color: #00C1B9;
          line-height: 48rpx;
        }

        .nickname {}
      }

      .captions {
        padding: 0 20rpx;

        .title {
          font-weight: 500;
          font-size: 28rpx;
          color: #202020;
        }

        .content {
          padding-top: 10rpx;
          font-size: 26rpx;
          color: #5c5c5c;
          position: relative;

          text {
            font-size: 26rpx;
          }

          .showAll {
            position: absolute;
            bottom: 0;
            right: 0;
            background: #fff;
          }
        }

        .image {
          overflow: hidden;
          padding-top: 10rpx;

          .imagesItem {
            width: 32.3%;
            height: 210rpx;
            float: left;
            margin-right: 1.5%;

            image {
              display: block;
              width: 100%;
              height: 100%;
              border-radius: 10rpx;
            }

            &:nth-last-child(1) {
              margin-right: 0;
            }
          }
        }
      }

    }

    .actions {
      padding: 20rpx;

      .icons {
        width: 28rpx;
        height: 28rpx;

        image {
          display: block;
          width: 100%;
          height: 100%;
        }
      }

      text {
        padding-left: 10rpx;
        font-size: 26rpx;
        color: #5c5c5c;
      }
    }

    .zbItem {
      background: #ffffff;
      border-radius: 20rpx;
      padding: 20rpx;
      margin-top: 20rpx;

      .thumb {
        width: 160rpx;
        height: 200rpx;
        position: relative;
        margin-right: 20rpx;

        image {
          width: 160rpx;
          height: 200rpx;
          border-radius: 10rpx;
          display: block;
        }

        .maskimg {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 160rpx;
          height: 80rpx;
          background: linear-gradient(180deg, rgba(51, 51, 51, 0) 0%, rgba(32, 32, 32, 0.7) 100%);
          border-radius: 0rpx 0rpx 10rpx 10rpx;
        }

        .desc {
          position: absolute;
          bottom: 0;
          left: 0;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 20rpx;
          color: #ffffff;
          padding: 0 0 10rpx 10rpx;
          display: flex;
          align-items: center;

          .icon {
            width: 22rpx;
            height: 22rpx;
            display: block;
            margin-right: 5rpx;
          }
        }
      }

      .title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #202020;
      }
    }

    .seeNum {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #5c5c5c;
    }

    .userInfo {
      width: 100%;

      .nickname {
        font-weight: 400;
        font-size: 26rpx;
        color: #aaaaaa;
        margin-left: 10rpx;
      }

      .avatar {
        width: 36rpx;
        height: 36rpx;
        border-radius: 50%;

        image {
          width: 36rpx;
          height: 36rpx;
          display: block;
          border-radius: 50%;
        }
      }

      .fans {
        font-size: 26rpx;
        color: #aaaaaa;
      }
    }
  }

  .creatUser {
    padding: 0 50rpx;

    .avatar {
      width: 48rpx;
      height: 48rpx;
      border-radius: 50%;
      font-size: 30rpx;
      color: #202020;

      image {
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 50%;
      }
    }
  }

  .creatBox {
    padding: 50rpx 0 100rpx 0;

    .creatIcon {
      width: 110rpx;
      height: 110rpx;
      display: block;
      border-radius: 50%;
    }

    text {
      padding-top: 10rpx;
      font-size: 26rpx;
      color: #202020;
    }
  }

  .heng-icon {
    width: 24rpx;
    height: 3rpx;
    background: #aaaaaa;
    margin-left: 5rpx;
  }
</style>
